<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>个人中心</title>
    <link rel="shortcut icon" href="../static/favicon.ico"/>
    <link rel="bookmark" href="/favicon.ico"/>
	<link rel="stylesheet" type="text/css" href="../static/css/base.css">
    <link rel="stylesheet" type="text/css" href="../static/css/my.css">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../static/js/base.js"></script>
    <script type="text/javascript">
             var ele;//保存图片对象
             var flag = 0; //图片是否修改
             var category_edit = 0; //是否为商品分类编辑或新增 0:为新增 1:为编辑
             var goods_edit = 0; //是否为商品详情编辑或新增 0:新增 1:编辑


             // 图片上传
            function imgPreview(fileDom,element){


                //判断是否支持FileReader
                if (window.FileReader) {
                    var reader = new FileReader();
                } else {
                    alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
                }
         
                //获取文件
                var file = fileDom.files[0];
                var imageType = /^image\//;
                //是否是图片
                if (!imageType.test(file.type)) {
                    alert("请选择图片！");
                    return;
                }
                //读取完成
                reader.onload = function(e) {
                    //获取图片dom
                    ele = e;
                    var img = document.getElementById(element);
                    //图片路径设置为读取的图片
                    img.src = e.target.result;
         
                    flag = 1;
                };       
                reader.readAsDataURL(file);
          
            }


            // 保存动作
            function save(){
                        if(flag==1){

                         // ajax 上传图片 
                          $.post("upload_h5.php", {img: ele.target.result}, function(ret) { 
                            if (ret.img!='') {  
                                alert('save success');  
                                $('#showimg').html('<img src="' + ret.img + '">');  
                            } else {  
                                alert('save failed');  
                            }
                          },'json');  
                        }
                        console.log(ele);
                        // 处理其他选项的事务
                        shop_name=$('#shop_name').text();
                        console.log(shop_name);
                        shop_address=$('#shop_address').text();
                        console.log(shop_address);
                        shop_tel=$('#shop_tel').text();
                        console.log(shop_tel);
                        shop_category=$("#shop_category  option:selected").text();
                        console.log(shop_category);
                        least_fee=$('#least_fee option:selected').text();
                        console.log(least_fee)
                        send_fee=$('#send_fee option:selected').text();
                        console.log(send_fee)      

                        var categorys=[];
                        $("#categoryTable tr:not(:first)").each(function(i){
                        	categorys[i]=$(this).find("td").eq(0).text()
                        })
            }
    </script>
</head>
<body>
	<header>
        <div class="container clearfix" id="top">
            <a href="index.html"><img class="logo" src="../static/img/logo.png"></a>
            <a class="topbar-item" href="index.html">首页</a>
            <a class="topbar-item" href="category.html">商铺分类</a>
            <a class="topbar-item active" href="my.html">个人中心</a>
            <nav>
                <a href="register.html">注册</a>
                <span>|</span>
                <a href="login.html">登录</a>
            </nav>
        </div>
    </header>
    <a id="toTop" title="回到顶部"><img src="../static/img/scroll_top1.png"></a>

    <div class="main-box">
        <!-- 客户 -->
        <div class="customer hide">
            <div class="tabs fl">
                <ul>
                    <li class="active"><img src="../static/img/yonghu.png" alt="">我的账户</li>
                    <li><img src="../static/img/dingdan.png" alt="">我的订单</li>
                    <li><img src="../static/img/shoucang.png" alt="">我的收藏</li>
                </ul>
            </div>
            <div class="tabs-content clearfix">
                <div class="account">
                    <div class="user-info-item">
                        <span class="ui-title">我的头像：</span>
                        <img id="user_preview" class="i-user-circle" src="../static/img/avatar.jpg"></img>
                        <input type="file" name="file" id="imgFile" onchange="imgPreview(this,'user_preview')">
                    </div>
                    <div class="user-info-item">
                        <span class="ui-title">手机号码：</span>
                        <span id="telphone">178****5357</span>
                    </div>
                    <div class="user-info-item">
                        <span class="ui-title">收货人：</span>
                        <span id="person" title="点击修改收货人">苏栋先生</span>
                    </div>
                    <div class="user-info-item">
                        <span class="ui-title">收货地址：</span>
                        <span id="address" title="点击修改地址">江苏师范大学21世纪大楼</span>
                    </div>
                    <button id="userinfo_save">保存修改</button>
                </div>
                <div class="order hide">
                    <div class="order-item">
                        <div class="order-hd">
                            <span>订单编号:<i class="order_no">D-03788798</i></span>创建时间:<i class="create_time">2018-05-03 09:26:52</i>
                        </div>
                        <div class="order-bd">
                            <span class="order_name">华莱士（炸鸡汉堡文沃店）</span><span>订单状态:<i  class="order_status">已送达</i></span><span>订单金额：<i class="order_price">26</i>元</span>
                        </div>
                    </div>
                    <div class="order-item">
                        <div class="order-hd">
                            <span>订单编号:<i class="order_no">D-03788798</i></span>创建时间:<i class="create_time">2018-05-03 09:26:52</i>
                        </div>
                        <div class="order-bd">
                            <span class="order_name">华莱士（炸鸡汉堡文沃店）</span><span>订单状态:<i  class="order_status">已送达</i></span><span>订单金额：<i class="order_price">26</i>元</span>
                        </div>
                    </div>
                    <div class="order-item">
                        <div class="order-hd">
                            <span>订单编号:<i class="order_no">D-03788798</i></span>创建时间:<i class="create_time">2018-05-03 09:26:52</i>
                        </div>
                        <div class="order-bd">
                            <span class="order_name">华莱士（炸鸡汉堡文沃店）</span><span>订单状态:<i  class="order_status">已送达</i></span><span>订单金额：<i class="order_price">26</i>元</span>
                        </div>
                    </div>
                    <div class="order-item">
                        <div class="order-hd">
                            <span>订单编号:<i class="order_no">D-03788798</i></span>创建时间:<i class="create_time">2018-05-03 09:26:52</i>
                        </div>
                        <div class="order-bd">
                            <span class="order_name">华莱士（炸鸡汉堡文沃店）</span><span>订单状态:<i  class="order_status">已送达</i></span><span>订单金额：<i class="order_price">26</i>元</span>
                        </div>
                    </div>
                    <div class="order-item">
                        <div class="order-hd">
                            <span>订单编号:<i class="order_no">D-03788798</i></span>创建时间:<i class="create_time">2018-05-03 09:26:52</i>
                        </div>
                        <div class="order-bd">
                            <span class="order_name">华莱士（炸鸡汉堡文沃店）</span><span>订单状态:<i  class="order_status">已送达</i></span><span>订单金额：<i class="order_price">26</i>元</span>
                        </div>
                    </div>
                    <div class="pages fr"><span>下一页</span></div>
                </div>
                <div class="myfavorite hide">
                    <ul class="clearfix">
                        <li class="favorite-list fl">
                            <a href="#">
                                <img src="../static/img/demo.jpg" class="fl">
                                <div class="content">
                                    <div class="name">
                                        <span title="华莱士（炸鸡汉堡文沃店）">
                                          华莱士（炸鸡汉堡文沃店）
                                        </span>
                                    </div>
                                    <div class="rank clearfix">
                                        <span class="star-ranking fl">
                                            <span class="star-score" style="width: 68px"></span>
                                        </span>
                                        <span class="score-num fl">4.6</span>
                                        </div>
                                    <div class="price">
                                        <span class="start-price">起送 ￥15</span>
                                        <span class="send-price">
                                              配送费 ¥ 2
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="favorite-list fl">
                            <a href="#">
                                <img src="../static/img/demo.jpg" class="fl">
                                <div class="content">
                                    <div class="name">
                                        <span title="华莱士（炸鸡汉堡文沃店）">
                                          华莱士（炸鸡汉堡文沃店）
                                        </span>
                                    </div>
                                    <div class="rank clearfix">
                                        <span class="star-ranking fl">
                                            <span class="star-score" style="width: 68px"></span>
                                        </span>
                                        <span class="score-num fl">4.6</span>
                                        </div>
                                    <div class="price">
                                        <span class="start-price">起送 ￥15</span>
                                        <span class="send-price">
                                              配送费 ¥ 2
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="favorite-list fl">
                            <a href="#">
                                <img src="../static/img/demo.jpg" class="fl">
                                <div class="content">
                                    <div class="name">
                                        <span title="华莱士（炸鸡汉堡文沃店）">
                                          华莱士（炸鸡汉堡文沃店）
                                        </span>
                                    </div>
                                    <div class="rank clearfix">
                                        <span class="star-ranking fl">
                                            <span class="star-score" style="width: 68px"></span>
                                        </span>
                                        <span class="score-num fl">4.6</span>
                                        </div>
                                    <div class="price">
                                        <span class="start-price">起送 ￥15</span>
                                        <span class="send-price">
                                              配送费 ¥ 2
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>


        <!-- 商家 -->
        <div class="merchant">
            <div class="tabs fl">
                <ul>
                    <li class="active"><img src="../static/img/dingdan.png" alt="">我的订单</li>
                    <li><img src="../static/img/shangpu.png">店铺设置</li>
                    <li><img src="../static/img/shangpin.png">商品管理</li>
                </ul>
            </div>
            <div class="tabs-content clearfix">
                <div class="my_order">
                    <table border="1">
                         <tr>
                            <th>订单编号</th>
                            <th>客户</th>
                            <th>手机号</th>
                            <th>商品</th>
                            <th>订单状态</th>
                            <th>实付金额</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>  
                        <tr>
                            <td>D-103265</td>
                            <td>苏先生</td>
                            <td>17851185357</td>
                            <td>双层汉堡*1可乐*1</td>
                            <td>待送达</td>
                            <td>￥26</td>
                            <td>2019-1-15 17:16</td>
                            <td><button class="order_btn">确认送达</button></td>                            
                        </tr> 
                        <tr>
                            <td>D-103265</td>
                            <td>苏先生</td>
                            <td>17851185357</td>
                            <td>双层汉堡*1可乐*1</td>
                            <td>待送达</td>
                            <td>￥26</td>
                            <td>2019-1-15 17:16</td>
                            <td><button class="order_btn">确认送达</button></td>                            
                        </tr>            
                        <tr>
                            <td>D-103265</td>
                            <td>苏先生</td>
                            <td>17851185357</td>
                            <td>双层汉堡*1可乐*1</td>
                            <td>待送达</td>
                            <td>￥26</td>
                            <td>2019-1-15 17:16</td>
                            <td><button class="order_btn">确认送达</button></td>                            
                        </tr> 
                        <tr>
                            <td>D-103265</td>
                            <td>苏先生</td>
                            <td>17851185357</td>
                            <td>双层汉堡*1可乐*1</td>
                            <td>待送达</td>
                            <td>￥26</td>
                            <td>2019-1-15 17:16</td>
                            <td><button class="order_btn">确认送达</button></td>                            
                        </tr>           
                    </table>
                    <div class="pages fr"><span>下一页</span></div>
                </div>
                <div class="shop_setting hide">
                    <div class="setting-item banner">
                        <span>店铺名称:</span>
                        <span id="shop_name" title="点击修改名称">华莱士（炸鸡汉堡文沃店）</span><i class="tip">(点击修改名称，最长15个字符)</i>
                    </div>
                    <div class="setting-item banner">
                        <span>店铺宣传图:</span><img id='preview' src="../static/img/demo.jpg">
                        <input type="file" name="file" id="imgFile" onchange="imgPreview(this,'preview')">
                    </div>
                    <div class="setting-item">
                        <span>店铺分类:</span>
                        <select id="shop_category">
                            <option value="ms">美食</option>
                            <option value="zcyx">正餐优选</option>
                            <option value="cs">超市</option>
                            <option value="jxxc">精选小吃</option>
                            <option value="xgg">鲜果购</option>
                            <option value="xwc">下午茶</option>
                        </select>
                    </div>
                    <div class="setting-item">
                        <span>起送费:</span>
                        <select id="least_fee">
                            <option value="qs_0">0</option>
                            <option value="qs_10">10</option>
                            <option value="qs_15">15</option>
                            <option value="qs_20">20</option>
                            <option value="qs_25">25</option>
                            <option value="qs_30">30</option>
                        </select>元
                    </div>
                    <div class="setting-item">
                        <span>配送费:</span>
                        <select id="send_fee">
                            <option>0</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>元
                    </div>
                    <div class="setting-item">
                        <span>店铺地址:</span>
                        <span id="shop_address" title="点击修改地址">铜山新区上海路北延长段西侧28#-101</span><i class="tip">(点击修改地址，最长30个字符)</i>
                    </div>
                    <div class="setting-item">
                        <span>店铺电话:</span>
                        <span id="shop_tel" title="点击修改电话">051683888523/13885840035</span><i class="tip">(点击修改电话，最长30个字符)</i>
                    </div>
                    <div class="setting-item">
                        <span>商品分类:</span><button id="add_category">添加分类</button>
                        <table id="categoryTable" border="1">
                            <tr>
                                <th>分类名称</th>
                                <th>操作</th>
                            </tr>
                            <tr>
                                <td>🙏进店必看</td>
                                <td><button class="edit_category">编辑</button><button class="delete_category">删除</button></td>
                            </tr>
                            <tr>
                                <td>助力套餐</td>
                                <td><button class="edit_category">编辑</button><button class="delete_category">删除</button></td>
                            </tr>
                            <tr>
                                <td>👦超值精选套餐</td>
                                <td><button class="edit_category">编辑</button><button class="delete_category">删除</button></td>
                            </tr>
                            <tr>
                                <td>满减套餐</td>
                                <td><button class="edit_category">编辑</button><button class="delete_category">删除</button></td>
                            </tr>
 
                        </table>
                    </div>
                    <div class="btn">
                        <button id="upload_btn" onclick="save()">保存</button>
                    </div>
                </div>
                <div class="goods_setting hide">
                    <table border="1">
                        <tr> 
                            <th>商品名称</th>
                            <th>商品图片</th>
                            <th>商品价格（元）</th>
                            <th>商品分类</th>
                            <th>操作</th>
                        </tr>
                        <tr>
                            <td>双层鸡排堡</td>
                            <td><img src="../static/img/food.png"></td>
                            <td>13.99</td>
                            <td>category-1</td>
                            <td><button class="edit_goods">编辑</button><button class="delete_goods">删除</button></td>
                        </tr>
                        <tr>
                            <td>双层鸡排堡1</td>
                            <td><img src="../static/img/food.png"></td>
                            <td>14.99</td>
                            <td>category-2</td>
                            <td><button class="edit_goods">编辑</button><button class="delete_goods">删除</button></td>
                        </tr>
                        <tr>
                            <td>双层鸡排堡2</td>
                            <td><img src="../static/img/food.png"></td>
                            <td>15.99</td>
                            <td>category-3</td>
                            <td><button class="edit_goods">编辑</button><button class="delete_goods">删除</button></td>
                        </tr>
                    </table>
                    <button id="add_goods">添加商品</button>
                </div>
                    
                <div id="editCategory" class="hide">
                    <div class="close">
                        <button class="close_btn"></button>
                    </div>
                    <div class="pop_content">
                        <h2>商品分类</h2>
                        <div class="edit_item">
                            <span>分类名称</span>(最大长度15)
                            <input type="text" name="" maxlength="15">
                        </div>
                    </div>
                    <button class="edit_save" id="category_save">保存</button>
                </div>
                <div id="editGoods" class="hide">
                    <div class="close">
                        <button class="close_btn"></button>
                    </div>
                    <div class="pop_content">
                        <h2>商品详情</h2>
                        <div class="edit_item">
                            <span>商品名称</span>(最大长度15)
                            <input type="text" name="" maxlength="15">
                        </div>
                        <div class="edit_item">
                            <span>商品图片</span>
                            <img id='edit_preview' src="../static/img/demo.jpg">
                            <input type="file" name="file" id="imgFile" onchange="imgPreview(this,'edit_preview')">
                        </div>
                        <div class="edit_item">
                            <span>商品价格</span>
                            <input type="number" name="">
                        </div>
                        <div class="edit_item">
                            <span>商品分类</span>
                            <select>
                                <option>category-1</option>
                                <option>category-2</option>
                                <option>category-3</option>
                            </select>
                        </div>
                    </div>
                    <button class="edit_save" id="goods_save">保存</button>
                </div>                

            </div>
        </div>
        <div id="mask" class="hide"></div>
    </div>
    <script type="text/javascript">
        $(function(){

            $('.order_btn').click(function(){
                // 订单状态数据库更新处理


            })


            // 弹出窗口

            $('.close').click(function(){
                $(this).parent().addClass('hide');
                $('#mask').addClass('hide')
            })

            $('#add_category').click(function(){
            	$('#editCategory .pop_content .edit_item input').val("");
            	$('#editCategory,#mask').removeClass('hide')
            	$("#category_save").unbind("click").on("click",function(){
            		var value=$('#editCategory').find('.edit_item input').val();
	                $("#categoryTable").append("<tr><td>"+value+"</td><td><button class='edit_category'>编辑</button><button class='delete_category'>删除</button></td></tr>");
            		$('#editCategory,#mask').addClass('hide')
            	})
                category_edit = 0;
            })

            $('#add_goods').click(function(){
                $('#editGoods,#mask').removeClass('hide')
                goods_edit = 0;
            })

            $("#categoryTable").on("click",".edit_category",function(){
                $('#editCategory').find('.edit_item input').val($(this).parent().parent().find('td').eq(0).text());
                $('#editCategory,#mask').removeClass('hide')
                category_edit = 1;
                var index = $(this).parent().parent().index();

	            $('#category_save').unbind("click").on("click",function(){
	                var value=$('#editCategory').find('.edit_item input').val();
  console.log(index)
               		$("#categoryTable").find("tr").eq(index).find("td").eq(0).html(value)
                	$('#editCategory,#mask').addClass('hide')
	            })
            })


            $('.edit_goods').click(function(){
                $('#editGoods').find('.edit_item input').eq(0).val($(this).parent().parent().find('td').eq(0).text());
                $('#editGoods').find('.edit_item img').attr('src',$(this).parent().parent().find('img').attr('src'))
                $('#editGoods').find('.edit_item input').eq(2).val($(this).parent().parent().find('td').eq(2).text());
                $('#editGoods').find('.edit_item select').val($(this).parent().parent().find('td').eq(3).text())
                $('#editGoods,#mask').removeClass('hide')
                goods_edit = 1;
            })

            // 编辑保存按钮
            function categorySave(index){
            	if(category_edit==0){
                    // 增加分类
                    var value=$('#editCategory').find('.edit_item input').val();
                    $("#categoryTable").append("<tr><td>"+value+"</td><td><button class='edit_category'>编辑</button><button class='delete_category'>删除</button></td></tr>");
                }else{
                    //修改分类
                }
                $('#editCategory,#mask').addClass('hide')
            }



            $('#goods_save').click(function(){
                if(goods_edit==1){
                    // 修改数据库
                }else{
                    //增加数据库
                }
                $('#editGoods,#mask').addClass('hide')
            })



            //编辑店铺设置
            $("#address").click(function() { 
                var span = $(this); 
                var txt = span.text(); 
                var input = $("<input type='text'value='" + txt + "'/>"); 
                span.html(input); 
                input.click(function() { return false; }); 
                input.trigger("focus"); 
                input.blur(function() { 
                    var newtxt = $(this).val(); 
                    span.html(newtxt); 
                })
            })
            $("#person").click(function() { 
                var span = $(this); 
                var txt = span.text(); 
                var input = $("<input type='text'value='" + txt + "'/>"); 
                span.html(input); 
                input.click(function() { return false; }); 
                input.trigger("focus"); 
                input.blur(function() { 
                    var newtxt = $(this).val(); 
                    span.html(newtxt); 
                })
            })
            $("#shop_name").click(function() { 
                var span = $(this); 
                var txt = span.text(); 
                var input = $("<input maxlength='15' type='text'value='" + txt + "'/>"); 
                span.html(input); 
                input.click(function() { return false; }); 
                input.trigger("focus"); 
                input.blur(function() { 
                    var newtxt = $(this).val(); 
                    span.html(newtxt); 
                })
            })
            $("#shop_address").click(function() { 
                var span = $(this); 
                var txt = span.text(); 
                var input = $("<input maxlength='30'  type='text'value='" + txt + "'/>"); 
                span.html(input); 
                input.click(function() { return false; }); 
                input.trigger("focus"); 
                input.blur(function() { 
                    var newtxt = $(this).val(); 
                    span.html(newtxt); 
                })
            })
            $("#shop_tel").click(function() { 
                var span = $(this); 
                var txt = span.text(); 
                var input = $("<input maxlength='30' type='text'value='" + txt + "'/>"); 
                span.html(input); 
                input.click(function() { return false; }); 
                input.trigger("focus"); 
                input.blur(function() { 
                    var newtxt = $(this).val(); 
                    span.html(newtxt); 
                })
            })

            function confirmDelete(obj){
                var message = confirm("确认删除？");
                if(message==true){
                    $(obj).parent().parent().remove();
                }
            }

            $("#categoryTable").on("click",".delete_category",function(){
            	confirmDelete(this);
            })



            $('.customer .tabs ul li').click(function(){
                $(this).addClass('active');
                $(this).siblings().removeClass('active');
                if($(this).index()==0){
                    $('.account').removeClass('hide');
                    $('.order,.myfavorite').addClass('hide');
                }else if($(this).index()==1){
                    $('.order').removeClass('hide');
                    $('.account,.myfavorite').addClass('hide');                  
                }else if($(this).index()==2){
                    $('.myfavorite').removeClass('hide');
                    $('.order,.account').addClass('hide');
                }
            })

            $('.merchant .tabs ul li').click(function(){
                $(this).addClass('active');
                $(this).siblings().removeClass('active');
                if($(this).index()==0){
                    $('.my_order').removeClass('hide');
                    $('.shop_setting,.goods_setting').addClass('hide');
                }else if($(this).index()==1){
                    $('.shop_setting').removeClass('hide');
                    $('.goods_setting,.my_order').addClass('hide');                  
                }else if($(this).index()==2){
                    $('.goods_setting').removeClass('hide');
                    $('.my_order,.shop_setting').addClass('hide');
                }
            })
        })
    </script>
</body>
</html>